import { defineComponent } from "vue";
import Header from "../Header";
import { HeaderProps } from "../Header/types";
import { getSize } from "@/command/apiTool";
export default defineComponent({
  name: "page-title",
  props: {
    ...HeaderProps,
    childClass: {
      type: String,
      default: "",
    },
    bgColor: {
      type: String,
      default: "",
    },
  },
  setup(props, { slots }) {
    const renderBk = () => {
      if (!props.bgColor) return null;
      return (
        <div
          class={"absolute left-0 top-0 right-0"}
          style={{
            height: "100%",
            zIndex: 1,
            backgroundSize: "100% 100%",
            background: props.bgColor,
          }}
        ></div>
      );
    };
    return () => {
      return (
        <div class={"flex flex-col "}>
          {renderBk()}
          <div
            style={{
              backgroundColor: !props.bgColor ? "#EFEFEF" : "",
            }}
            class={
              "absolute left-0 right-0 top-0 bottom-0 z-10 overflow-y-scroll h-full no-scrollbar flex flex-col"
            }
          >
            <Header
              title={props.title}
              right={props.right}
              onBack={props.onBack}
            />
            <div
              id="page-body"
              class={[
                "no-scrollbar overflow-y-scroll  bg-[#F5F5F5] relative flex flex-col flex-1 pb-[100px]",
                props.childClass,
              ]}
              style={{ maxHeight: `calc(100vh - 48px)` }}
            >
              {slots.default?.()}
            </div>
          </div>
        </div>
      );
    };
  },
});
